<template>
  <navbarDefaultCom @changeDate="changeDate" @changeDay="changeDay" @changeRizhu="changeRizhu" />
  <view class="square" >
    <view class="search" >
      <view :class="[searchType === 'recommend' ? 'active' : '']" @click="changeSearchType('recommend')" >推荐</view>
      <view class="line" >|</view>
      <view :class="[searchType === 'time' ? 'active' : '']" @click="changeSearchType('time')" >时间</view>
    </view>

    <view v-if="loadingDiaryList"  style="margin-top: 24px;" >
      <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="24" > </nut-skeleton>
    </view>
    
    <view class="diary-list" v-else >
      <view class="diary-item" v-for="item in diaryList" :key="item.id" >
        <diaryCardCom :diary="item" pure />
      </view>
    </view>

    <no-more v-if="final" />
  </view>
</template>
<script lang='ts'  setup >
  import navbarDefaultCom from '@/components/navbar-default-com/navbar-default-com.vue'
  import diaryCardCom from '@/components/diary-card-com/diary-card-com.vue'
  import { ref, onMounted } from 'vue';
  import { DiaryController } from '@/controller'
  import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
  import dayjs from 'dayjs'
  import NoMore from '@/components/no-more-com/index.vue'
  import { useRouterStore } from '@/store'


  const searchType = ref<'recommend' | 'time'>('recommend')

  const queryParams = ref({
    time: '',
    isDay: true,
    page: 1,
    tgcr: true,
    ganZhi: '乙巳',
    rizhu: '日主',
    total: 0
  })

  const diaryList = ref<API.DIARY[]>([])

  const loadingDiaryList  = ref(false)

  const final = ref(false)

  const changeSearchType = (type: 'recommend' | 'time') => {
    searchType.value = type
  }

  const changeRizhu = ({rizhu}: {rizhu: string}) => {
    queryParams.value.ganZhi = rizhu
    getDiaryPage() 
  }

  const changeDate = ({date}: {date: string}) => {
    queryParams.value.time = date
    getDiaryPage()
  }

  const changeDay = ({isDay}: {isDay: boolean}) => {
    queryParams.value.isDay = isDay
    getDiaryPage()
  }

  const getDiaryPage = async () => {
    if (queryParams.value.page == 1 )  loadingDiaryList.value = true

    const data = await DiaryController.getDiaryPage(queryParams.value)
    loadingDiaryList.value = false
    queryParams.value.total = data.total
    if (diaryList.value.length < queryParams.value.total) {
      diaryList.value.push(...data.records)
    }
    if (diaryList.value.length === queryParams.value.total) {
      final.value = true
    }
  }
  
  onReachBottom(() => {
    queryParams.value.page++
    getDiaryPage()
    console.log('onReachBottom');
  })

  onLoad(() => {
    queryParams.value.time = dayjs().format('YYYY-MM-DD')
    getDiaryPage()
  })

  onShow(() => {
    useRouterStore().setRoutes(['/pages/square/index'])
  })

</script>
<style lang='scss' scoped >
@import '../../styles/index.scss';

 .square {
  padding: 0 48rpx;
  padding-top: 300rpx;
  padding-bottom: 160rpx;
  background-color: $page-color;
  box-sizing: border-box;
  min-height: 100vh;
  .search {
    display: flex;
    color: $text-grey;
    .line {
      margin: 0 24rpx;
    }
    .active {
      color: $main-color;
    }
  }
  .diary-list {
    margin-top: 24rpx;
    .diary-item {
      margin-bottom: 24rpx;
    }
  }
 }
</style>